<template>
	<div class="hello">
		<el-container>
			<el-main>
				<el-row :gutter="20">
					<el-col :span="12">
						<h2>
							<img class="tatle" :src="res.meirihaodian.title.pic" alt="res.meirihaodian.title.h2" /><small>{{ res.meirihaodian.title.small }}</small>
						</h2>
						<el-row :gutter="4">
							<el-col :span="12" v-for="(item, index) in res.meirihaodian.pic" :key="index">
								<h3>{{ item.title }}</h3>
								<el-row :gutter="4">
									<el-col :span="16">
										<a href="">
											<img class="pic" :src="item.imges[0].src" alt="" />
										</a>
									</el-col>
									<el-col :span="8">
										<a href="" class="ma-1">
											<img class="pci-1" :src="item.imges[1].src" alt="" />
										</a>
										<a href="">
											<img class="pci-2" :src="item.imges[2].src" alt="" />
										</a>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-col>

					<el-col :span="12">
						<h2>
							<img class="tatle" :src="res.taobaozhibo.title.pic" alt="res.taobaozhibo.title.h2" /><small>{{ res.taobaozhibo.title.small }}</small>
						</h2>
						<el-row :gutter="4">
							<el-col :span="12" v-for="(item, index) in res.taobaozhibo.pic" :key="index">
								<h3>
									{{ item.title }} <small>{{ item.see }}</small>
								</h3>
								<el-row :gutter="4">
									<el-col :span="16">
										<a href="">
											<img class="pic" :src="item.imges[0].src" alt="" />
										</a>
									</el-col>
									<el-col :span="8">
										<a href="" class="ma-1">
											<img class="pci-1" :src="item.imges[1].src" alt="" />
										</a>
										<a href="">
											<img class="pci-2" :src="item.imges[2].src" alt="" />
										</a>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-col>
				</el-row>

				<el-row :gutter="20">
					<el-col :span="24">
						<h2>
							<img class="tatle" :src="res.youhaohuo.title.pic" alt="res.youhaohuo.title.h2" /><small>{{ res.youhaohuo.title.small }}</small>
						</h2>
						<el-row :gutter="20">
							<el-col :span="4" v-for="(item, index) in res.youhaohuo.pic" :key="index">
								<a href="">
									<img class="pic" :src="item.imges.src" alt="" />
								</a>
								<h3 class="tao1">{{ item.h3 }}</h3>
								<p class="tao2">{{ item.p }}</p>
								<span class="tao3">{{ item.see }}</span>
							</el-col>
						</el-row>
					</el-col>
				</el-row>

				<el-row>
					<h2 class="danpin">{{ res.remaidanpin.title.h2 }}</h2>
				</el-row>

				<el-row>
					<p class="tic">{{ res.remaidanpin.tic }}</p>
				</el-row>

				<el-row>
					<el-col :span="1" v-for="(item, index) in res.remaidanpin.tics" :key="index">
						<a href="" class="aa">{{ item.s }}</a>
					</el-col>
				</el-row>

				<el-row :gutter="7">
					<el-col :span="25" v-for="(item, index) in  res.remaidanpin.pic" :key="index" class="biankuang">
						<a href="">
							<img class="pic1" :src="item.imges.src" alt="" />
						</a>
						<p class="p1">{{ item.p }}</p>
						<p class="see1">{{ item.see }}</p>

					</el-col>
				</el-row>



			</el-main>
		</el-container>
	</div>
</template>

<script>
	let worsDis = {
		remaidanpin: {
			title: {
				h2: "▍热卖单品",
			},
			tics: [{
					s: "雪纺衫",
				},
				{
					s: "女秋装",
				},
				{
					s: "玩具",
				},
				{
					s: "彪马",
				},
				{
					s: "运动鞋",
				},
				{
					s: "双肩包",
				},
				{
					s: "鱼缸",
				},
				{
					s: "玩具",
				},

				{
					s: "沐浴露",
				},
				{
					s: "女装",
				},
				{
					s: "阿玛尼",
				},
				{
					s: "包包",
				},
				{
					s: "女装",
				},
				{
					s: "行李箱",
				},
				{
					s: "杯子",
				},
				{
					s: "衬衫男",
				},
				{
					s: "充电宝",
				},
				{
					s: "新款包",
				},
				{
					s: "口红",
				},
				{
					s: "牙膏",
				},
				{
					s: "套装",
				},
				{
					s: "洗衣机",
				},
				{
					s: "T恤衫",
				},
				{
					s: "耐克",
				},
			],
			pic: [{
					p: "¥89",
					see: "月销3595笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan1.webp"),
					},
				},
				{
					p: "¥234",
					see: "月销680笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan2.webp"),
					},
				},
				{
					p: "¥69",
					see: "月销876笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan3.webp"),
					},
				},
				{
					p: "¥499",
					see: "月销2262笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan4.webp"),
					},
				},
				{
					p: "¥253",
					see: "月销135笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan5.webp"),
					},
				},
				{
					p: "¥72",
					see: "月销2456笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan6.webp"),
					},
				},
				{
					p: "¥199",
					see: "月销179笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan7.webp"),
					},
				},
				{
					p: "¥162",
					see: "月销3542笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan8.webp"),
					},
				},
				{
					p: "¥316",
					see: "月销552笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan9.webp"),
					},
				},
				{
					p: "¥147",
					see: "月销827笔",
					imges: {
						link: "",
						src: require("../assets/rmdp/dan10.webp"),
					},
				},
			]
		},
		meirihaodian: {
			title: {
				pic: require("../assets/webp/tatle1.png"),
				h2: "每日好店",
				small: "发现深藏好店",
			},
			pic: [{
					title: "万能集市",
					imges: [{
							link: "",
							src: require("../assets/webp/1.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/2.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/3.webp"),
						},
					],
				},
				{
					title: "淘宝江湖",
					imges: [{
							link: "",
							src: require("../assets/webp/4.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/5.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/6.webp"),
						},
					],
				},
				{
					title: "深藏不露",
					imges: [{
							link: "",
							src: require("../assets/webp/13.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/14.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/15.webp"),
						},
					],
				},
				{
					title: "高手林立",
					imges: [{
							link: "",
							src: require("../assets/webp/16.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/17.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/18.webp"),
						},
					],
				},
			],
		},

		taobaozhibo: {
			title: {
				pic: require("../assets/webp/tatle2.png"),
				h2: "每日好店",
				small: "你的爱豆直播等你呦！",
			},
			pic: [{
					title: "aj1黑脚趾",
					see: "10245观看",
					imges: [{
							link: "",
							src: require("../assets/webp/7.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/8.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/9.webp"),
						},
					],
				},
				{
					title: "青青河边草真皮",
					see: "14529观看",
					imges: [{
							link: "",
							src: require("../assets/webp/10.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/11.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/12.webp"),
						},
					],
				},
				{
					title: "涵木家",
					see: "14587观看",
					imges: [{
							link: "",
							src: require("../assets/webp/19.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/20.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/21.webp"),
						},
					],
				},
				{
					title: "厂家优品",
					see: "45612观看",
					imges: [{
							link: "",
							src: require("../assets/webp/22.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/23.webp"),
						},
						{
							link: "",
							src: require("../assets/webp/24.webp"),
						},
					],
				},
			],
		},
		youhaohuo: {
			title: {
				pic: require("../assets/webp/tatle3.png"),
				h2: "有好货",
				small: "与品质生活不期而遇",
			},
			pic: [{
					h3: "大豆家方头奶奶鞋",
					p: "一脚蹬的设计，方便日常",
					see: "☺ 1595人说好",
					imges: {
						link: "",
						src: require("../assets/webp/haohuo1.webp"),
					},
				},
				{
					h3: "佳宝路转角水槽",
					p: "304不锈钢，表面光洁坚固",
					see: "☺ 1580人说好",
					imges: {
						link: "",
						src: require("../assets/webp/haohuo2.webp"),
					},
				},
				{
					h3: "肖优秀真皮细高跟过膝",
					p: "细跟尖头设计更显优雅女人",
					see: "☺ 3938人说好",
					imges: {
						link: "",
						src: require("../assets/webp/haohuo3.webp"),
					},
				},
				{
					h3: "好利来黑天鹅蛋糕",
					p: "材料新鲜分量充足，奶香",
					see: "☺ 380人说好",
					imges: {
						link: "",
						src: require("../assets/webp/haohuo4.webp"),
					},
				},
				{
					h3: "汽车盲点变道辅助",
					p: "行车安全盲区检测系统，采",
					see: "☺ 3194人说好",
					imges: {
						link: "",
						src: require("../assets/webp/haohuo5.webp"),
					},
				},
				{
					h3: "PUMA芥末绿复古老爹鞋",
					p: "芥末绿色的鞋面视觉上给人",
					see: "☺ 347人说好",
					imges: {
						link: "",
						src: require("../assets/webp/haohuo6.webp"),
					},
				},
			],
		},
	};

	export default {
		name: "HelloWorld",
		props: {
			msg: String,
		},
		data() {
			return {
				res: worsDis,
			};
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	/* h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
} */
	.el-container {
		width: 1191px;
		margin: auto;
	}

	a {
		display: block;
	}

	img {
		display: block;
		width: 100%;
	}

	small {
		font-size: 12px;
		color: #999;
		font-weight: 300;
	}

	.pic {
		height: 180px;
	}

	.pci-2 {
		display: block;
		width: 100%;
		height: 89px;
	}

	.ma-1 {
		margin-bottom: 4px;
	}

	h3 {
		text-align: left;
	}

	.tatle {
		height: 24px;
		display: inline-block;
		width: auto;
	}

	h2 {
		text-align: left;
	}

	h2 small {
		font-size: 8px;
		position: relative;
		top: -7px;
		left: 4px;
		font-weight: 100;
	}

	.tao1 {
		text-align: left;
		font-weight: 100;
		font-size: 16px;
		margin: 8px 0px;
	}

	.hao1:hover {
		color: red;
	}

	.tao2 {
		text-align: left;
		font-weight: 100;
		font-size: 14px;
		margin: 8px 0px;
	}

	.tao3 {
		display: block;
		text-align: left;
		color: #00aeff;
		font-size: 13px;
	}

	.hello {
		background: rgb(253, 251, 251);
	}

	.danpin {
		color: orange;
	}

	.aa {
		color: gray;
		font-size: 12px;
	}

	.aa {
		text-decoration: none;
	}

	a:hover {
		color: orange;
	}

	.el-col-25 {
		width: 20%;
	}

	.pic1 {
		margin-top: 20px;
	}

	.p1 {
		float: left;
		font-size: 20px;
		color: orangered;
	}

	.see1 {
		margin-bottom: 40px;
		font-size: 10px;
		color: #999;
		margin-top: 28px;
		margin-left: 138px;
	}

	.biankuang {
		margin-top: 15px;
	}

	.biankuang:hover {
		border: 2px solid orangered;
	}
</style>
